<template>
  <div class="add-account-keeper-page">
    <a-spin :spinning="loading">
      <a-form :model="formState" ref="formDataRef" name="basic" :label-col="{ style: 'width:145px' }" :wrapper-col="{ style: 'calc(100% - 145px)' }" autocomplete="off">
        <div class="base-info">
          <!-- 下拉框 -->
          <a-row>
            <a-col :span="12">
              <a-form-item label="所属经营单位" name="deptId" :rules="[{ required: true, message: '请选择所属经营单位!' }]">
                <a-select :disabled="type === 3 || type === 2" v-model:value="formState.deptId" placeholder="请选择" :options="getAllCompanyOpts" :field-names="{ label: 'name', value: 'id' }">
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
        </div>

        <div class="question-info" v-for="(item, index) in formState.accountList" :key="index">
          <a-row>
            <a-col :span="24">账户{{ index + 1 }}</a-col>
            <a-col :span="12">
              <a-form-item label="账户性质" :name="['accountList', index, 'accountProperties']" :rules="[{ required: true, message: '请输入运单号', trigger: 'change' }]">
                <a-select ref="select" v-model:value="item.accountProperties" :disabled="type === 3 || type === 2">
                  <a-select-option value="基本户">基本户</a-select-option>
                  <a-select-option value="一般户">一般户</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

            <a-col :span="12">
              <a-form-item label="户名" :name="['accountList', index, 'name']" :rules="[{ required: true, message: '请输入户名', trigger: 'change' }]">
                <a-input v-model:value="item.name" :disabled="type === 3 || type === 2" />
              </a-form-item>
            </a-col>
          </a-row>
          <div class="account-div" v-for="(children, i) in item.deptAccountDtoList" :key="i">
            <a-row>
              <a-col :span="24">
                <div class="title">账号{{ i + 1 }}</div>
              </a-col>
              <a-col :span="12">
                <a-form-item label="账户简称" :name="['accountList', index, 'deptAccountDtoList', i, 'shortName']" :rules="[{ required: true, message: '请输入账户简称', trigger: 'change' }]">
                  <a-input v-model:value="children.shortName" :disabled="type === 3 || type === 2" />
                </a-form-item>
              </a-col>

              <a-col :span="12">
                <a-form-item label="账号" :name="['accountList', index, 'deptAccountDtoList', i, 'receiveAccount']" :rules="[{ required: true, message: '请输入账户', trigger: 'change' }]">
                  <a-input
                    v-model:value="children.receiveAccount"
                    :disabled="type === 3 || type === 2"
                    :maxLength="19"
                    @keyup="validatePhoneInputHandle($event, formState.accountList[index].deptAccountDtoList[i], ['receiveAccount'])"
                  />
                </a-form-item>
              </a-col>

              <a-col :span="12">
                <a-form-item label="开户银行" :name="['accountList', index, 'deptAccountDtoList', i, 'openBank']" :rules="[{ required: true, message: '请输入开户银行', trigger: 'change' }]">
                  <a-select v-model:value="children.openBank" placeholder="请选择" :disabled="type === 3 || type === 2">
                    <a-select-option v-for="item in dataDict['DEPOSIT_BANK']" :key="item.consValue" :value="item.name" :label="item.name">{{ item.name }}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>

              <a-col :span="12">
                <a-form-item label="开户行名称" :name="['accountList', index, 'deptAccountDtoList', i, 'bankName']" :rules="[{ required: true, message: '请输入开户行名称', trigger: 'change' }]">
                  <a-input v-model:value="children.bankName" :disabled="type === 3" />
                </a-form-item>
              </a-col>

              <a-col :span="12">
                <a-form-item label="币种" :name="['accountList', index, 'deptAccountDtoList', i, 'currency']" :rules="[{ required: true, message: '请输入币种', trigger: 'change' }]">
                  <a-select v-model:value="children.currency" placeholder="请选择" :disabled="type === 3 || type === 2">
                    <a-select-option v-for="item in dataDict['CURRENCY']" :key="item.consValue" :value="item.name" :label="item.name">{{ item.name }}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>

              <a-col :span="12">
                <a-form-item label="联行号" :name="['accountList', index, 'deptAccountDtoList', i, 'sisterBankNum']">
                  <a-input
                    v-model:value="children.sisterBankNum"
                    :disabled="type === 3"
                    :maxLength="12"
                    @keyup="validatePhoneInputHandle($event, formState.accountList[index].deptAccountDtoList[i], ['sisterBankNum'])"
                  />
                </a-form-item>
              </a-col>

              <a-col :span="12">
                <a-form-item label="收款方式" :name="['accountList', index, 'deptAccountDtoList', i, 'paymentMethod']" :rules="[{ required: true, message: '请输入收款方式', trigger: 'change' }]">
                  <a-select ref="select" v-model:value="children.paymentMethod" :disabled="type === 3 || type === 2">
                    <!-- <a-select-option value="转账">转账</a-select-option>
                    <a-select-option value="移动支付">移动支付</a-select-option>
                    <a-select-option value="易收宝">易收宝</a-select-option>
                    <a-select-option value="现金">现金</a-select-option> -->
                    <a-select-option v-for="item in dataDict['PAYMENT_TERM']" :key="item.consValue" :value="item.name" :label="item.name">{{ item.name }}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>

              <a-col :span="12">
                <a-form-item label="是否同步账单" :name="['accountList', index, 'deptAccountDtoList', i, 'isSyncBill']" :rules="[{ required: true, message: '请选择是否同步账单', trigger: 'change' }]">
                  <a-radio-group v-model:value="children.isSyncBill" :disabled="type === 3">
                    <a-radio :value="1">是</a-radio>
                    <a-radio :value="0">否</a-radio>
                  </a-radio-group>
                </a-form-item>
              </a-col>

              <a-col :span="12">
                <a-form-item label="备注" :name="['accountList', index, 'deptAccountDtoList', i, 'remark']">
                  <a-input v-model:value="children.remark" :disabled="type === 3" />
                </a-form-item>
              </a-col>

              <a-col :offset="8" :span="4">
                <a-button type="primary" @click="deleteChilrenAccount(index, i)" style="margin-right: 8px" v-if="formState.accountList[index].deptAccountDtoList.length > 1 && type === 1"
                  >删除账号</a-button
                >

                <a-button type="primary" @click="addChilren(index)" v-if="i + 1 === formState.accountList[index].deptAccountDtoList.length && type === 1">添加账号</a-button>
              </a-col>
            </a-row>
          </div>
          <div style="display: flex; justify-content: space-between">
            <div>
              <a-button type="primary" @click="deleteAccount(index)" v-if="formState.accountList.length > 1 && type === 1">删除账户</a-button>
            </div>
          </div>
        </div>
        <a-button type="primary" @click="addAccount" style="margin-right: 8px" v-if="type === 1">添加账户</a-button>
      </a-form>
    </a-spin>
    <div class="operation-wrapper">
      <a-button :loading="loading" type="primary" @click="onSubmit" v-debounce v-if="type === 1">提 交</a-button>
      <a-button :loading="loading" type="primary" @click="editHandle" v-debounce v-if="type === 2">提 交</a-button>
      <a-button @click="resetForm">关 闭</a-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { toRefs, watch } from "vue";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";

import CommonHook from "@/hook/commonHook";

const props = withDefaults(
  defineProps<{
    visible: boolean;
    passData: AccountKeeper.ListRows;
    type: number; //1新增  2编辑  3查看
  }>(),
  {}
);
const emit = defineEmits<{
  (e: "submit"): void;
  (e: "update:visible", visible: boolean): void;
}>();

const { visible, type, passData } = toRefs(props);
const { formState, loading, formDataRef, getAllCompanyHandle, getAllCompanyOpts } = InitHook();
const { onSubmit, resetForm, addAccount, addChilren, deleteChilrenAccount, deleteAccount, editHandle, validatePhoneInputHandle } = OperationHook({
  loading,
  formState,
  emit,
  formDataRef,
  type,
  passData
});

const { dataDict } = CommonHook();
const init = () => {
  if (type.value === 3 || type.value === 2) {
    console.log(passData.value);
    const { deptId, accountProperties, name } = passData.value;
    Object.assign(formState.accountList[0].deptAccountDtoList[0], passData.value);
    formState.deptId = deptId;
    formState.accountList[0].name = name;
    formState.accountList[0].accountProperties = accountProperties;
  }
  getAllCompanyHandle();
};

watch(
  () => visible.value,
  v => {
    if (!v) {
      resetForm();
      formState.accountList = [
        {
          accountProperties: "", //账户性质
          name: "", //户名
          deptAccountDtoList: [
            {
              shortName: "", //账户简称
              receiveAccount: "", //账号
              openBank: "", //开户银行
              bankName: "", //开户行名称
              currency: "", //币种
              sisterBankNum: "", //联行号
              paymentMethod: "", //收款方式
              isSyncBill: 0, //是否同步账单
              remark: "" //备注
            }
          ]
        }
      ];
    } else {
      init();
    }
  }
);
init();
</script>
<style lang="stylus" scoped>
.add-account-keeper-page {
    padding-bottom: 50px;
    .title{
        font-weight: 600;
        font-size: 14px;
        padding: 12px;
    }
    .base-info{
        margin-bottom:12px
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0px 0px 4px 0px #ccc;
        font-weight: 600;
        padding:12px

        :deep(.ant-form-item){
          margin-bottom: 8px;
        }
    }

    .question-info{
       padding:30px 6px;
       margin-bottom:12px
       background-color: #fff;
       border-radius: 8px;
       box-shadow: 0px 0px 4px 0px #ccc;
       font-weight: 600;
       padding:12px;

         :deep(.ant-form-item){
          margin-bottom: 8px;
         }
    }

    .content-info{
        margin-bottom:12px
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0px 0px 4px 0px #ccc;
        font-weight: 600;
        padding:20px 6px;

        :deep(.ant-form-item){
          margin-bottom: 8px;
        }
        :deep(.ant-input-number){
          width:100%;
        }
    }

    .operation-wrapper{
        position: absolute;
        background-color: #fff;
        left: 0;
        bottom: 0;
        width: 100%;
        padding: 12px 0;
        text-align: center;
        box-shadow: 1px 1px 5px #ccc;
        z-index: 99;
        :deep(.ant-btn-primary){
          margin-right: 12px;
        }
      }


      :deep(.ant-select-selector){
          width:100%;
        }

  .account-div{
    padding:12px
    border:3px solid #FFDAB9;
    border-radius:10px;
    margin-bottom:6px
  }

  }
</style>
